<template>
    <transition>
        <div class="market-content">
            <!--TODO-->
            <!--<div class="market-nav">-->
            <!--<div class="nav-first">-->
            <!--<div>Trade</div>-->
            <!--<div>Quotation</div>-->
            <!--</div>-->
            <!--<img src="@/assets/img/search.png" alt="">-->
            <!--<div class="nav-last">-->
            <!--<div class="active">Favorites</div>-->
            <!--<div>Tokenion</div>-->
            <!--<div>Binance</div>-->
            <!--<div>Bittrex</div>-->
            <!--<img src="@/assets/img/more.png" alt="">-->
            <!--</div>-->
            <!--</div>-->
            <div class="market-nav">{{ $t('m.market.index.listTitle') }}</div>
            <div class="market-list-nav">
                <div>{{ $t('m.market.index.prompt[0]') }}</div>
                <!--<div>{{ $t('m.market.index.prompt[1]') }}</div>-->
                <!--<div>{{ $t('m.market.index.prompt[2]') }}</div>-->
                <div>{{ $t('m.market.index.prompt[1]') }}</div>
                <div>{{ $t('m.market.index.prompt[2]') }}</div>
            </div>
            <div class="market-list">

                <!--<div class="market-list-detail">
                         <div>
                             <span>DAI</span>
                             <span>/WETH</span>
                         </div>
                         <div class="market-price">
                             <div>0.005051</div>
                             <div>$0.64</div>
                         </div>
                         <div class="market-price">
                             <div>0.005051</div>
                             <div>$0.64</div>
                         </div>
                         <div class="market-price">
                             <div>0.005051</div>
                             <div>$0.64</div>
                         </div>
                         <div class="bg-green">+0%</div>
                     </div>-->
                <div class="market-list-detail" v-for="(v,k) in list" :key="k">
                    <div>
                        <span>{{ v.typecode }}</span>
                        <span style="font-size: 0.28rem;">/{{ v.areacode }}</span>
                    </div>
                    <!--<div class="market-price">
                        <div>{{ v.today_price_max | roundOff(2)}}</div>
                        <div>${{ v.today_price_max / exchange.rate | roundOff(2)}}</div>
                    </div>
                    <div class="market-price">
                        <div>{{ v.today_price_min | roundOff(2)}}</div>
                        <div>${{ v.today_price_min / exchange.rate | roundOff(2)}}</div>
                    </div>-->
                    <div class="market-price">
                        <div>{{ v.today_price_new | roundOff(2)}}</div>
                        <div>${{ v.today_price_new / exchange.rate | roundOff(2)}}</div>
                    </div>
                    <div class="bg-red market-change" v-if="v.today_deal_rise < 0">{{ v.today_deal_rise | roundOff(2)}}%</div>
                    <div class="bg-green market-change" v-else>+{{ v.today_deal_rise | roundOff(2)}}%</div>
                </div>
            </div>
            <Loading></Loading>
        </div>
    </transition>
</template>
<script>
    /* eslint-disable */
    import {myAlert} from "@/assets/js/h5plus/nativeUI";

    export default {
        name: 'market_index',
        mounted() {
            this.getMarket();
            // 按下安卓返回键后，让页面不返回
            this.$store.dispatch("aBackUrl", "no");
        },
        data() {
            return {
                list: []
            }
        },
        methods: {
            getMarket: function () {
                let that = this;
                that.aLoading({
                    show: true,
                    tip: this.$t('m.wallet.transaction.list.prompt[7]')
                });
                // 最长等待5秒，接口出错
                setTimeout(() => {
                    if(that.loading.show && that.$route.path == '/index/market'){
                        that.aLoading({
                            show: false,
                        });
                        myAlert({
                            msg: this.$t('m.component.alert_little.msg1.tip'),
                            button: this.$t('m.component.alert_little.msg1.button')
                        });
                    }
                }, 5000);

                try {
                    let ws = new WebSocket("ws://www.winerbit.com:20021");

                    ws.onopen = function () {
                        console.log("Connection open ...");
                        ws.send('{"token":"ETSC","identifier":"","params":{"method":"DBV_MARKET_MAIN"}}');
                    };
                    ws.onmessage = function (evt) {
                        try {
                            let obj = JSON.parse(evt.data);
                            let data = obj.Data.Data.frames;
                            that.list = [];
                            // 把ETSC放最前面
                            for (let i in data) {
                                if (data[i].areaname == "CTC") {
                                    if (data[i].typecode == "ETSC") {
                                        that.list.push(data[i]);
                                    }
                                }
                            }
                            for (let i in data) {
                                if (data[i].areaname == "CTC") {
                                    if (data[i].typecode != "ETSC") {
                                        that.list.push(data[i]);
                                    }
                                }
                            }
                            that.aLoading({
                                show: false,
                            });
                        } catch (e) {
                            that.aLoading({
                                show: false,
                            });
                            myAlert({
                                msg: this.$t('m.component.alert_little.msg1.tip'),
                                button: this.$t('m.component.alert_little.msg1.button')
                            });
                            console.log(e);
                        }

                    };

                    ws.onclose = function () {
                        console.log("Connection closed.");
                    };
                } catch (e) {
                    that.aLoading({
                        show: false,
                    });
                    myAlert({
                        msg: this.$t('m.component.alert_little.msg1.tip'),
                        button: this.$t('m.component.alert_little.msg1.button')
                    });
                    console.log(e);
                }
            }


        }
    }
</script>
<style scoped>
    @import '../../assets/css/market.css';

    body {
        background: #ffffff;
    }
</style>